<template>
	<view class="main" :style="'top:'+(-demo.height-demo.top-10)+'px'">
		<view class="fixed_head">
			<head1 class="nav_top"
				:style="'height:' +  demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10px'"
				:nav="title">
			</head1>
		</view>
		<view class="hahah" :style="'padding-bottom:'+(demo.height+demo.top+10)+'px'">
			<view class="myResume">
				<view class="myResume_top" :style="'margin-top:'+(demo.height+demo.top+10)+'px'">
					<view class="myResume_top_photo">
						<image v-if="resume.photo==''" src="../../static/icon/zhaopinmain.png" mode=""></image>
						<image v-if="resume.photo!=''" :src="webImgUrl+resume.photo" mode=""></image>
						<text v-if="resume.personName=='' || resume.personName==null">姓名</text>
						<text v-if="resume.personName!='' && resume.personName!=null">{{resume.personName}}</text>
					</view>
					
				</view>
				<view class="myResume_top_info">
					<view class="mti_tit dis_flex">
						<text>基本信息</text>
						<image @click="edit" src="../../static/icon/bianji.png" mode=""></image>
					</view>
					<view class="mti_info">
						<view>学校：<text>{{resume.school}}</text></view>
						<view>学历：<text>{{resume.educationName}}</text></view>
						<view>专业：<text>{{resume.major}}</text></view>
						<view>职称：<text>{{resume.title}}</text></view>
						<view style="width: 500rpx;">联系方式：<text>{{resume.tel}}</text></view>
					</view>
				</view>
				<view class="myResume_center">
					<text @click="myResumeLook">预览</text>
					<view>
						<view class="myResume_center_title dis_flex" @click="addResumeInfo(0)">
							<text>工作经历</text>
							<view>+添加</view>
						</view>
						<view class="work_list" @click="allDetil(item)" v-for="(item,index) in experience" :key="index">
							<view class="dis_flex work_list_title ">
								<text class="fir">{{item.companyName}}</text>
								<text class="common_font_style">{{item.startTime}}
									<text
										v-if="item.endTime=='' || item.endTime==undefined">~~至今</text>
									<text v-if="item.endTime!=''">~~</text>
									{{item.endTime}}</text>
							</view>
							<view class="work_list_jzr dis_flex">
								<view class="">
									<text
										class="common_font_style">见证人：</text><text>{{item.witness}}</text>
								</view>
								<view class="zc" v-if="item.position!=''">{{item.position}}</view>
							</view>
							<view class="work_list_jzr dis_flex">
								<view class="">
									<text
										class="common_font_style">联系方式：</text><text>{{item.witnessTel}}</text>
								</view>
							</view>
							<view class="work_list_jzr dis_flex">
								<view class="">
									<text
										class="common_font_style">工作职责：</text><text>{{item.duty}}</text>
								</view>
							</view>
						</view>
						<view class="myResume_center_title dis_flex" @click="addResumeInfo(1)">
							<text>项目业绩</text>
							<view>+添加</view>
						</view>
						<view class="work_list" @click="proDetil(item)" v-for="(item,index) in career" :key="index">
							<view class="dis_flex work_list_title ">
								<text class="fir">{{item.project}}</text>
								<text class="common_font_style">{{item.startTime}}
									<text
										v-if="item.endTime=='' || item.endTime==undefined">~~至今</text>
									<text v-if="item.endTime!=''">~~</text>
									{{item.endTime}}</text>
							</view>
							<view class="work_list_jzr dis_flex">
								<view class="dis_flex par">
									<text class="common_font_style">所在公司：</text><text
										class="now_par">{{item.companyName}}</text>
								</view>
								<view class="zc">{{item.role}}</view>
							</view>
							<view class="work_list_jzr dis_flex" v-if="item.classificationName!=''">
								<view class="">
									<text
										class="common_font_style">项目分类：</text><text>{{item.classificationName}}</text>
								</view>
							</view>
							<view class="work_list_jzr dis_flex" v-if="item.purposeName!=''">
								<view class="">
									<text
										class="common_font_style">工业用途：</text><text>{{item.purposeName}}</text>
								</view>
							</view>
							<view class="work_list_jzr dis_flex" v-if="item.natureName!=''">
								<view class="">
									<text
										class="common_font_style">建设性质：</text><text>{{item.natureName}}</text>
								</view>
							</view>
							<view class="work_list_jzr dis_flex">
								<view class="">
									<text class="common_font_style">项目描述：</text><text>{{item.remark}}</text>
								</view>
							</view>
						</view>

						<view class="myResume_center_title dis_flex" @click="addResumeInfo(2)">
							<text>感兴趣内容</text>
							<view>添加/修改</view>
						</view>
						<view class="work_list myRe_tag " v-if="dataAll.interest!=''">
							<view class="dis_flex" v-for="(item,index) in BeTabList" :key="index" v-if="item!=''">
								{{item}}
							</view>
						</view>
						<view class="myResume_center_title dis_flex" @click="addResumeInfo(3)">
							<text>求职意向</text>
							<view>添加/修改</view>
						</view>
						<view class="work_list hoby" v-if="dataAll.intention!=''">
							<!-- <text v-if="dataAll.intention==''">我希望从事****工作......</text> -->
							<text>{{dataAll.intention}}</text>

						</view>
						<view class="myResume_center_title dis_flex" @click="addResumeInfo(4)">
							<text>个人特长</text>
							<view>添加/修改</view>
						</view>
						<view class="work_list hoby" v-if="dataAll.specialty!=''">
							<text>{{dataAll.specialty}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import head1 from '../../common/head/head'
	export default {
		components: {
			head1,
		},
		data() {
			return {
				title: '我的简历',
				demo: {
					top: '',
					height: ''
				},
				webImgUrl: '',
				experience: [], //工作经历
				resume: {
					school: '',
					education: ''
				}, //基本信息
				dataAll: {
					intention: '',
					specialty: ''
				}, //获取的信息
				dataMain: {}, //简历预览数据，传给浏览页面
				BeTabList: [],
				career: [], //项目经历
				education: [], //教育经历
				work_list: ["安全三类人员", "管理人员(八大员)", "操作工种", "房地产经纪人", "专业人才", "BIM工程师"],
			}
		},
		onShow() {
			this.getMyResume()
			this.getPersonResumeGet()
		},
		created() {
			const demo = uni.getMenuButtonBoundingClientRect()
			this.demo.top = demo.top
			this.demo.height = demo.height
			// 获取图片前缀
			this.webImgUrl = this.$webUrl
			this.getMyResume()
			this.getPersonResumeGet()
		},
		methods: {
			// 强制刷新、重新加载页面
			test() {
				this.$forceUpdate()
			},
			// 标签获取
			getPersonResumeGet() {
				let userid = this.$store.state.userId
				this.$myResquest.getResumeGet({
					userId: userid
				}).then(res => {
					if (res.data.code == 200) {
						// 赋值给dataAll传给子集
						this.dataAll = res.data.data
						let newData = res.data.data.interest
						// 字符串转数组
						this.BeTabList = newData.split('@@')
					}
				})
			},
			// 预览简历
			myResumeLook() {
				uni.navigateTo({
					url: "../myResumeLook/myResumeLook?data=" + encodeURIComponent(JSON.stringify(this.dataMain))
				})
			},
			// 编辑简历
			edit() {
				uni.navigateTo({
					url: "../myResume/editResume?data=" + encodeURIComponent(JSON.stringify(this.dataMain.resume))
				})
			},
			allDetil(info) {

				uni.navigateTo({
					url: "../WorkExp/addWorkExp?data=" + encodeURIComponent(JSON.stringify(info))

				})

				// if (info == 1) {
				// 	uni.navigateTo({
				// 		url: "../ProjectPerformance/addProjectPerformance"
				// 	})
				// }
			},
			proDetil(info) {
				// 项目分类等下拉数据存储到本地
				this.$myResquest.getPurpose().then(res => {
					if (res.data.code == 200) {
						// 下拉选项存储到本地
						uni.setStorageSync('getXiaLa', res.data.data)
					}
				})
				uni.navigateTo({
					url: "../ProjectPerformance/addProjectPerformance?data=" + encodeURIComponent(JSON.stringify(
						info))

				})
			},
			// 添加简历信息（经历、业绩等）
			addResumeInfo(info) {
				if (info == 0) {
					uni.navigateTo({
						url: "../WorkExp/addWorkExp"
					})
				}
				if (info == 1) {
					uni.navigateTo({
						url: "../ProjectPerformance/addProjectPerformance"
					})
				}
				if (info == 2) {
					uni.navigateTo({
						url: "../BeInterested/BeInterested"
					})
				}
				if (info == 3) {
					uni.navigateTo({
						url: "../JobSeekingIntention/JobSeekingIntention?data=" + encodeURIComponent(JSON
							.stringify(this.dataAll))
					})
				}
				if (info == 4) {
					uni.navigateTo({
						url: "../PersonalSpecialty/PersonalSpecialty?data=" + encodeURIComponent(JSON.stringify(
							this.dataAll))
					})
				}
			},
			// 删除兴趣标签
			deleteTag(index) {
				// 原始长度
				this.work_list.splice(index, 1)

			},
			// 数据加载
			getMyResume() {
				let userid = this.$store.state.userId
				this.$myResquest.getPersonReShow({
					userId: userid
				}).then(res => {
					if (res.data.code == 200) {
						this.dataMain = res.data.data
						// 工作经历
						this.experience = res.data.data.experience
						this.resume = res.data.data.resume
						this.career = res.data.data.career
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		.fixed_head {
			position: fixed;
			z-index: 9999;
		}

		.nav_top {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			min-width: 750rpx;
			background: #eeeeef;
		}

		.hahah {
			height: 100%;
			overflow: auto;
			background: #ffffff;
			box-sizing: border-box;

			.myResume {
				width: 750rpx;

				.myResume_top {
					height: 180rpx;
					// background: url(../../static/icon/talentbg.png) no-repeat;
					// background-size: 100% 100%;
					position: relative;
					background: #f7f7f7;

					.myResume_top_photo {
						text-align: center;
						    display: flex;
						    align-items: center;
						    margin-left: 75rpx;
						
						image {
							margin-top: 15rpx;
							width: 140rpx;
							height: 140rpx;
							border-radius: 50%;
						}
						text{
						    font-size: 34rpx;
						    font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
						    font-weight: 400;
						    color: #757475;
						    margin-left: 30rpx;
						    letter-spacing: 11rpx;
						    width: 400rpx;
						    /* background: pink; */
						    overflow: hidden;
						    text-overflow: ellipsis;
						    white-space: nowrap;
							    text-align: left;
						}
					}

					
				}
				.myResume_top_info {
					// position: absolute;
					// top: 91rpx;
					// left: 50%;
					// transform: translate(-50%, 35%);
					    border-radius: 5px;
					    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
					    background: #ffffff;
					     padding: 0 35rpx 19rpx;
					     box-sizing: border-box;
				
					.mti_tit {
						padding: 29rpx 40rpx 0 40rpx;
				
						text {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							color: #333333;
						}
				
						image {
							width: 35rpx;
							height: 35rpx;
						}
					}
				
					.mti_info {
						display: flex;
						flex-wrap: wrap;
						padding: 8rpx 0 0 40rpx;
						border-top: 2rpx dashed #d6d7d7;
						margin-top: 20rpx;
				
						view {
						    width: 50%;
						    padding: 16rpx 0;
						    display: flex;
						    box-sizing: border-box;
				
							text {
								width: 190rpx;
								min-width: 50%;
								background: #f7f7f7;
								border-radius: 10rpx;
								font-size: 25rpx;
								display: flex;
								align-items: center;
								padding-left: 2rpx;
								flex-wrap: nowrap;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}
				}
				.myResume_center {
					>text {
						display: block;
						margin: 50rpx auto;
						width: 600rpx;
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						background-image: linear-gradient(#c6e1df, #63bbb7);
						border-radius: 44rpx;
						font-size: 34rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						color: #ffffff;
						letter-spacing: 30rpx;
						text-indent: 30rpx;
					}

					>view {
						margin: 25rpx auto;
						width: 664rpx;
						padding: 31rpx 40rpx;
						background: #ffffff;
						border-radius: 10px;
						box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.10);

						.myResume_center_title {
							font-size: 24rpx;
							font-weight: 500;
							color: #02ada7;
							line-height: 80rpx;
							border-bottom: 1rpx solid #e5e5e5;

							>text {
								font-size: 28rpx;
								font-weight: 700;
								color: #333333;
							}
						}

						.work_list {
							padding: 27rpx 0rpx 0;
							font-size: 24rpx;
							box-sizing: border-box;
							border-bottom: 1rpx solid #e5e5e5;


							.work_list_title {
								height: 27rpx;
								line-height: 27rpx;
								margin-bottom: 24rpx;

								.fir {

									font-size: 28rpx;
									font-family: PingFang SC, PingFang SC-Medium;
									font-weight: 500;
									text-align: left;
									color: #333333;
								}
							}

							.work_list_jzr {
								margin-bottom: 24rpx;

								.now_par {
									display: block;
									width: 310rpx;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;

								}

								.zc {
									font-size: 24rpx;
									color: #5CD1CE;
									padding: 5rpx 10rpx;
									box-sizing: content-box;
									height: 32rpx;
									border: 1rpx solid #5cd1ce;
									border-radius: 17rpx;
								}
							}
						}

						.myRe_tag {
							display: flex;
							flex-wrap: wrap;
							padding: 15rpx 0;
							box-sizing: border-box;

							view {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC-Bold;
								font-weight: 700;

								border-radius: 18rpx;
								padding: 5rpx 12rpx;
								box-sizing: content-box;
								margin: 8rpx 6rpx;
								display: flex;
								align-items: center;
								justify-content: space-around;
								color: #5cd1ce;
								border: 1rpx solid #5cd1ce;

								image {
									width: 24rpx;
									height: 24rpx;
									margin: 0 4rpx;
								}
							}


						}

						.hoby {
							padding-bottom: 10rpx;
							// min-height: 134rpx;
						}
					}
				}
			}
		}

	}
</style>
